// vw布局
@function Ant_Group($w) {
  @return ($w / 1451) * 100 + vw;
}
@function font($w) {
  @return ($w / 1451) * 100 + vmin;
}

// 轮播图左右按钮
@mixin bannerBtn() {
  width: Ant_Group(56);
  height: Ant_Group(56);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.12);
  border: none;
  position: absolute;
  i {
    font-size: Ant_Group(24);
    color: #fff;
  }
}
// 底部p标签 伪类
@mixin footer_p_after() {
  content: "";
  position: absolute;
  width: Ant_Group(1);
  height: Ant_Group(16);
  background-color: rgba(255, 255, 255, 0.6);
  right: 0;
}

// 底部地址/招聘咨询
@mixin footerInfo() {
  width: Ant_Group(443);
  height: Ant_Group(90);
  display: flex;
  flex-direction: column;
  h2 {
    color: #fff;
    font-size: Ant_Group(16);
    margin-bottom: Ant_Group(24);
    font-weight: bold;
  }
  p {
    margin-bottom: Ant_Group(16);
  }
}

// 底部二维码
@mixin QR() {
  position: absolute;
  width: Ant_Group(130);
  padding: Ant_Group(10);
  background-color: #fff;
  border-radius: Ant_Group(7);
  top: Ant_Group(-175);
  left: Ant_Group(-59);
  display: none;
}

// 底部二维码三角形
@mixin QR_after() {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border: Ant_Group(10) solid transparent;
  border-top: Ant_Group(10) solid #fff;
  bottom: Ant_Group(-20);
  left: calc(50% - Ant_Group(10));
}

// 主体筛选块工作地点/职位类别标题
@mixin city_and_job() {
  width: Ant_Group(205);
  font-size: Ant_Group(16);
  display: flex;
  justify-content: space-between;
  margin: Ant_Group(24) 0 Ant_Group(16);
}

// 我要投递盒子的公共样式
@mixin sendStyle() {
  width: Ant_Group(224);
  height: Ant_Group(308);
  border-radius: Ant_Group(12);
  box-shadow: -10px 10px 40px 0 rgba(216, 218, 224, 0.5);
  padding: Ant_Group(24);
  box-sizing: border-box;
  transition: all 0.5s ease;
  background-color: #fff;
  color: rgba(255, 255, 255, 0.85);
  .img_container {
    width: Ant_Group(56);
  }
  .title {
    margin: Ant_Group(20) 0 Ant_Group(16);
    p {
      font-size: Ant_Group(23);
      height: Ant_Group(33);
      line-height: Ant_Group(33);
      font-weight: bold;
      color: #000;
    }
  }
  .text {
    p {
      font-size: Ant_Group(16);
      font-weight: 400;
      line-height: Ant_Group(28);
      color: rgba(153, 153, 153, 1);
    }
  }
  .main_send_btn {
    width: Ant_Group(50);
    height: Ant_Group(40);
    border-radius: Ant_Group(20);
    border: 1px solid rgba(216, 216, 216, 1);
    background-color: #fff;
    // box-shadow: 0 2px 0 0 rgba(0,0,0,0.02);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: Ant_Group(35);
    span {
      font-size: Ant_Group(14);
      display: none;
    }
    i {
      font-size: Ant_Group(16);
      color: rgba(153, 153, 153, 1);
    }
  }
}

// 头部公共样式
@mixin header() {
  width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    transition: all 0.5s ease;
    // 头部导航栏模块
    nav {
      width: 100%;
      height: Ant_Group(80);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      // 头部左侧logo
      .header_nav_logo {
        height: 100%;
        margin: 0 Ant_Group(80);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex: 1;
        .logo_img_container {
          width: Ant_Group(176);
        }
      }
      // 导航栏列表
      ul {
        display: flex;
        height: 100%;
        align-items: center;
        li {
          height: 100%;
          display: flex;
          align-items: center;
          padding: 0 Ant_Group(35);
          &:hover > a {
            color: #1677ff;
          }
          &:last-child {
            padding-right: Ant_Group(70);
          }
          & > a {
            font-size: Ant_Group(16);
            font-weight: bold;
            color: #fff;
          }
        }
      }
      // 头部右侧登录模块
      .nav_login_container {
        display: flex;
        align-items: center;
        width: Ant_Group(165);
        height: 100%;
        & > a {
          font-size: Ant_Group(14);
          margin: 0 Ant_Group(24);
          color: #fff;
        }
        .header_swith_language {
          width: Ant_Group(40);
        }
      }
    }
}

// 底部公共样式
@mixin footer() {
  width: 100%;
  height: Ant_Group(253);
  background-color: rgba(28, 37, 51, 1);
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.6);
  font-style: Ant_Group(12);
  font-weight: 300;
  // 底部地址、咨询、关注模块
  .footer_top {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    .footer_top_content {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: Ant_Group(51) 0;
      border-bottom: Ant_Group(1) solid rgba(255, 255, 255, 0.1);
      // 地址
      .footer_top_address {
        @include footerInfo;
      }
      // 咨询
      .footer_top_consult {
        @include footerInfo;
      }
      // 关注
      .footer_top_aboutUs {
        width: Ant_Group(295);
        height: Ant_Group(90);
        h2 {
          font-size: Ant_Group(16);
          color: #fff;
          font-weight: bold;
        }
        // icon图标模块
        .aboutUs_iconGroup {
          position: relative;
          display: flex;
          margin-top: Ant_Group(33);
          .aboutUs_iconItem {
            width: Ant_Group(32);
            margin-right: Ant_Group(18);
          }
          // 图标hover
          .wechat {
            &:hover ~ .wechat_QR_code {
              display: block;
            }
          }
          .weibo {
            &:hover ~ .weibo_QR_code {
              display: block;
            }
          }
          .maimai {
            &:hover ~ .maimai_QR_code {
              display: block;
            }
          }
          // 二维码
          .wechat_QR_code {
            @include QR;
            &::after {
              @include QR_after;
            }
          }
          .weibo_QR_code {
            @include QR;
            left: -9px;
            // display: none;
            &::after {
              @include QR_after;
            }
          }
          .maimai_QR_code {
            @include QR;
            left: 40px;
            &::after {
              @include QR_after;
            }
          }
        }
      }
    }
  }
  // 底部经营许可信息栏
  .footer_bottom {
    width: 100%;
    height: Ant_Group(66);
    display: flex;
    justify-content: center;
    align-items: center;
    p {
      padding: Ant_Group(8);
      position: relative;
      &:nth-child(1)::after {
        @include footer_p_after;
      }
      &:nth-child(2)::after {
        @include footer_p_after;
      }
    }
  }
}

// 回到顶部
@mixin backTop(){
    width: Ant_Group(50);
    height: Ant_Group(50);
    border-radius: 50%;
    position: fixed;
    bottom: Ant_Group(50);
    right: Ant_Group(20);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: -10px 10px 40px 0 rgb(216 218 224 / 50%);
    transition: all 0.3s ease;
    opacity: 0;
    & > i {
      font-size: Ant_Group(16);
    }
};
